<template>
  <div class="app-body">
    <van-nav-bar
      :title="'统计-'+departname"
      left-text="导出"
      right-text="筛选"
      @click-right="onClickRight"
      @click-left="onClickLeft"
    />
    
<JsonExcel ref="excel"
  class   = "btn btn-default"
  :data   = "json_data"
  :fields = "json_fields"
  :meta = "json_meta"
  worksheet = "教务工作"
        type    = "csv"
  name    = "filename.xls" v-show="false">

  Download Excel (you can customize this with html code!)

</JsonExcel>
    <van-tabs v-model="active" sticky animated @click="onClick">
      <van-tab title="本周">
        <van-cell v-for="(item,index) in list" :title="item.name" :value="item.num" is-link :to="'cover/'+item.id + '/'+ item.name + '/week'" />
      </van-tab>
      <van-tab title="本月">
        <van-cell v-for="(item,index) in list1" :title="item.name" :value="item.num" is-link :to="'cover/'+item.id + '/'+ item.name + '/month'" />
      </van-tab>
      <van-tab title="总计">
        <van-cell v-for="(item,index) in list2" :title="item.name" :value="item.num" is-link :to="'cover/'+item.id + '/'+ item.name + '/1'" />
      </van-tab>
    </van-tabs>
    <van-popup v-model="showPicker" round position="bottom">
    <van-picker
    v-show="showPicker"
    title="选择部门"
    show-toolbar
    :columns="columns"
    @confirm="onConfirm"
    @cancel="showPicker = false"
  />
  </van-popup>  
    <Bottom></Bottom>
  </div>

</template>
<script>
  import { list ,types } from '@/api/app'
  import { pushArray } from '@/utils/app'
	import Bottom from '@/components/bottom'
  import JsonExcel from 'vue-json-excel'

export default {
  data() {
    return {
      user: this.$store.state.user,
      list: [],
      list1: [],
      list2: [],
      active: 0,
      departs: [],
      departid: '',
      columns: [],
      showPicker: false,
      departname: '全部',
      json_fields: {
            '姓名': 'user_name',
            '年级': 'departname',
            '班级': 'classname',
            '标题': 'title',
            '科目': 'subject',
            '教师/主备人': 'teacher',
            '过程要点记录': 'content',
            '不足或缺点': 'content1',
            '优评': 'content2'
      },
      json_data: [
      ],
      json_meta: [
        [
          {
            key: "charset",
            value: "utf-8",
          },
        ],
      ],
      excel: 0

    }
  },
  components: {
    Bottom, JsonExcel
  },
  computed: {},
  mounted() {
    
    // console.log(this.$refs.excel.$emit("click"))
  },
  created() {
    this.getList()
    this.getType()
  },

  methods: {
    getList() {
      if(this.list.length >0)return
      list({type: 'chart', types: 'week', departname: this.departname, excel: this.excel}).then(res=>{
        this.list = pushArray(this.list, res)
      })
    },
    getList1() {
      if(this.list1.length >0)return
      list({type: 'chart', types: 'month', departname: this.departname, excel: this.excel}).then(res=>{
        this.list1 = pushArray(this.list1, res)
      })
    },
    getList2() {
      if(this.list2.length >0)return
      list({type: 'chart', departname: this.departname, excel: this.excel}).then(res=>{
        this.list2 = pushArray(this.list2, res)
      })
    },
    onClick() {
      switch(this.active) {
        case 0:
        this.getList()
        break
        case 1:
        this.getList1()
        break
        case 2:
        this.getList2()
        break
      }
      
    },
    onClickRight(){
      this.showPicker = true
    },
    onConfirm(e){
      this.departname = e
      this.list = []
      this.list1= []
      this.list2 = []
      this.active = 0
      this.getList()
      this.showPicker = false
    },
    getType(){
      types().then(res=> {
        for(let i in res.departs) {
          this.columns.push(res.departs[i]['departname'])
        }
      })
    },
    onClickLeft(){
      if(this.isWeiXin()) {
        this.$dialog.alert({
          title: '请复制以下链接，用自带浏览器打开',
          message: location.href + '?app_id='+ this.$store.state.app.id +'&userid='+ this.$store.state.user.campus_user_id,
        }).then(() => {
          // on close
        });
        return false
      }
      this.excel = 1
      let types = ''
      switch(this.active) {
        case 0:
        types = 'week'
        break
        case 1:
        types = 'month'
        break
        case 2:
        break
      }

      let e = document.createEvent('MouseEvent')
      e.initEvent('click', false, false)
      list({type: 'excel', types, departname: this.departname}).then(res=>{
        this.$toast('首次导出，需要再次点击导出按钮')
        this.json_data = res
        this.$refs.excel.$el.dispatchEvent(e);
        console.log(e)
      })
      
    },
    //判断是否是微信浏览器的函数
    isWeiXin(){
    //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
      var ua = window.navigator.userAgent.toLowerCase();
      //通过正则表达式匹配ua中是否含有MicroMessenger字符串
      if(ua.match(/MicroMessenger/i) == 'micromessenger'){
      return true;
      }else{
      return false;
      }
    }
  }
};
</script>
<style>
  .app-body{background: #fff; padding-bottom: 50px;}
</style>